<template>
  <base-card-mask
    :src="bgImage"
    :color="'rgba(0, 0, 0, .7)'"
    :blur="'2px'">
    <div class="ranklist-card">

      <router-link class="ranklist-card__title" tag="div"
        :to="`/ranklist/${info.id}`">
        <span>{{ name }}</span>
        <svg-icon icon-class="caret-right"></svg-icon>
      </router-link>

      <div class="ranklist-card__list">
        <div class="list-item" v-for="(item, i) of tracks" :key="i"
          @click="playSong(item.id)">

          <div class="list-item__left">
            <img
              v-lazy="`${item.picUrl}?param=50y50`"
              :src="`${item.picUrl}?param=50y50`"
              :alt="info.name">
          </div>

          <div class="list-item__center">
            <span class="info__order">{{ i + 1 }}</span>
            <span class="info__name">{{ item.first }}</span>
            <span class="info__separator">-</span>
            <span class="info__artists">{{ item.second }}</span>
          </div>

          <div class="list-item__right">
            <svg-icon v-if="item.id === songId" class="list-item__right--red" icon-class="sound"></svg-icon>
            <span v-else>新</span>
          </div>
        </div>
      </div>
    </div>
  </base-card-mask>
</template>

<script>
import { mapGetters } from 'vuex'
import { formatArtists } from '@/utils'

export default {
  name: 'rank-list-card',
  props: {
    info: { type: Object, require: true }
  },
  computed: {
    ...mapGetters(['songId']),
    bgImage () {
      return this.tracks.length ? `${this.tracks[0].picUrl}?param=400y400` : ''
    }
  },
  data () {
    return {
      name: '',
      tracks: []
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    initData () {
      if (this.$storage.hasCache(`toplist-${this.info.id}`)) {
        const { data } = this.$storage.getItem(`toplist-${this.info.id}`)
        this.name = data.name
        this.extractTracks(data)
        return
      }

      // fix-2020-12-6: 添加定时器测试是否能延迟该部分的请求，让其他组件先渲染
      setTimeout(() => {
        this.$api.getPlaylistDetail(this.info.id).then(res => {
          const { playlist } = res.data
          this.name = playlist.name
          this.extractTracks(playlist)
          // 将 playlist 属性缓存
          this.$storage.setItem(`toplist-${this.info.id}`, playlist, true, {
            maxAge: 5 * 60 * 1000
          })
        })
      }, 1000)
    },
    extractTracks (playlist) {
      const tracks = playlist.tracks
        .slice(0, 3)
        .map(v => {
          const second = formatArtists(v.ar)
          return {
            id: v.id,
            first: v.name,
            second,
            picUrl: v.al.picUrl
          }
        })
      this.tracks = Object.freeze([].concat(tracks))
    },
    playSong (song) {
      const tracks = this.$storage.getItem(`toplist-${this.info.id}`).data.tracks
      this.$store.dispatch('player/updatePlaylist', {
        tracks,
        playlistId: this.info.id
      })
      this.$store.dispatch('player/changeSong', { song, toPlayer: false })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixins.scss';

.ranklist-card {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  height: 2.25rem;
  padding: 0 .1rem .1rem;
  border-radius: .1rem;
  color: #fff;

  &__title {
    height: .5rem;
    line-height: .5rem;
    text-align: center;
    font-size: $font--medium;
  }

  &__list {

    .list-item {
      display: flex;
      height: .5rem;
      margin-bottom: .05rem;

      &__left {
        width: .5rem;
        border-radius: .05rem;
        overflow: hidden;
        img {
          width: 100%;
        }
      }

      &__center {
        flex: 1;
        display: flex;
        // fix: 防止子元素超出宽度
        overflow: hidden;
        line-height: .5rem;
        font-size: $font--small;

        // info is a prefix
        .info {
          &__order {
            width: .25rem;
            text-align: center;
          }

          &__name {
            max-width: 35%;
            @include ellipsis();
          }

          &__separator {
            margin: 0 .05rem;
          }

          &__artists {
            flex: 1;
            font-size: $font--small-s;
            color: #ccc;
            @include ellipsis();
          }
        }
      }

      &__right {
        width: .25rem;
        line-height: .5rem;
        text-align: center;
        font-size: $font--small;

        &--red {
          color: $color-palette-red;
          font-size: $font--medium;
        }
      }
    }
  }
}
</style>
